<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>render fix</title>
    </head>
    <body>
        <table border="1">
            <tr>
                <td><img id="i1" src="slimerjs_capture_adapt.png"></td>
                <td><canvas id="c1" width="300" height="500"></canvas></td>
            </tr>
            <tr>
                <td><img id="i2" src="slimerjs_capture_adapt_zoomin.png"></td>
                <td><canvas id="c2" width="300" height="800"></canvas></td>
            </tr>
            <tr>
                <td><img id="i3" src="slimerjs_capture_adapt_zoomout.png"></td>
                <td><canvas id="c3" width="300" height="500"></canvas></td>
            </tr>
            <tr>
                <td><img id="i4" src="slimerjs_capture_adapt_clip.png"></td>
                <td><canvas id="c4" width="100" height="100"></canvas></td>
            </tr>
            <tr>
                <td><img id="i5" src="slimerjs_capture_adapt_clip_zoomin.png"></td>
                <td><canvas id="c5" width="100" height="100"></canvas></td>
            </tr>
            <tr>
                <td><img id="i6" src="slimerjs_capture_adapt_clip_zoomout.png"></td>
                <td><canvas id="c6" width="100" height="100"></canvas></td>
            </tr>
            <tr>
                <td><img id="i7" src="slimerjs_capture_adapt_scroll.png"></td>
                <td><canvas id="c7" width="300" height="500"></canvas></td>
            </tr>
            <tr>
                <td><img id="i8" src="slimerjs_capture_adapt_zoomin_scroll.png"></td>
                <td><canvas id="c8" width="300" height="775"></canvas></td>
            </tr>
            <tr>
                <td><img id="i9" src="slimerjs_capture_adapt_zoomout_scroll.png"></td>
                <td><canvas id="c9" width="300" height="500"></canvas></td>
            </tr>
        </table>
        <h2>Result:</h2>
        <table border="1">
            <tr>
                <td><img id="ei"></td>
                <td><canvas id="ec" ></canvas></td>
            </tr>
        </table>

        <script type="text/javascript">
        function fillCanvas() {
            var i;
            for(i=1; i < 10; i++) {
                var im = document.getElementById('i'+i);
                var c = document.getElementById('c'+i);
                var ctx = c.getContext('2d');
                ctx.drawImage(im, 0,0);
            }
        }

        var ec =  document.getElementById('ec');
        var ei =  document.getElementById('ei');
        var currentIdx = 0;
        ei.addEventListener("load", function(){
            ec.width = ei.width;
            ec.height = ei.height;
            var ctx = ec.getContext('2d');
            ctx.drawImage(ei, 0,0);
                window.callPhantom();
            }, false);

        function setResultImage(idx, src ) {
            currentIdx = idx;
            var c = document.getElementById('c'+idx);
            var w = parseInt(c.getAttribute('width'));
            var h = parseInt(c.getAttribute('height'));
            ec.width = w;
            ec.height = h;
            ei.src = src;
        }

        function compareImages(expectedIdx){
            var expectedCanvas = document.getElementById('c'+expectedIdx);
            var resultCanvas = ec;

            var expectedCtx = expectedCanvas.getContext('2d');
            var expectedImageData = expectedCtx.getImageData(0, 0, expectedCanvas.width, expectedCanvas.height);

            var resultCtx = resultCanvas.getContext('2d');
            var resultImageData = resultCtx.getImageData(0, 0, resultCanvas.width, resultCanvas.height);

            var results = [];
            results[0] = [expectedImageData.width, resultImageData.width]
            results[1] = [expectedImageData.height, resultImageData.height]
            results[2] = [expectedImageData.data.length, resultImageData.data.length]
            results[3] = compareImagesData(expectedImageData, resultImageData);
            return results;
        }
        // during zoom in or zoom out, the rendering engine could add some blur around
        // each edge of squares. So we should not match equality of color, but we should
        // see if colors are almost equals.
        function compareImagesData(img1,img2){
            if(img1.data.length != img2.data.length)
                return 0;
            for(var i = 0; i < img1.data.length; i+=4){
                var d1=Math.abs(img1.data[i]-img1.data[i]);
                var d2=Math.abs(img1.data[i+1]-img1.data[i+1]);
                var d3=Math.abs(img1.data[i+2]-img1.data[i+2]);
                var similarity = Math.round( 100 - (d1+d2+d3)/(3*255) * 100);
                if(similarity < 98)
                    return i;
            }
            return true;
        }
        </script>

    </body>
</html>